<template>
	<u-popup :show="show" @close="proClear" :round="10">
		<view class="sheet_box" @click.stop="">
			<view class="sheet_box_all">
				<view class="sheet_box_list" v-for="(item,index) in actions" :key="index" @click="bindPro(item,index)">{{item.name}}</view>
				<h-line height="102" v-show="actions.length>5"></h-line>
			</view>
			<h-line height="20" bgColor="#F5F6F8"></h-line>
			<view class="sheet_box_btn" @click="proClear">取消</view>
		</view>
	</u-popup>
</template>

<script setup>
	/**
	 *
	 *
	 * NavBar 自定义弹窗
	 * @property {String} actions 列表
	 * @event {String} proClear 取消
	 * @event {String} bindPro 选择
	 *
	 * @example <h-modal :show="bindShow" titlea="标题" titleb="二标题" text="详细说明"  leftColor="#5C5C5C" rightColor="#202020" leftBtn="左按钮" rightBtn="右按钮" @clear="" @bind=""></h-modal>
	 */
	import { ref, onMounted } from 'vue'

	const props = defineProps({
		show: {
			type: Boolean,
		},
		actions: {
			type: Array,
		},
	})
	const emit = defineEmits(['close', 'select'])

	function proClear() {
		emit('close')
	}

	function bindPro(item,index) {
		emit('close')
		emit('select', item,index)
	}
</script>

<style lang="scss" scoped>
	.sheet_box {
		background: #ffffff;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
		.sheet_box_all {
			max-height: 510rpx;
			overflow-y: scroll;
			.sheet_box_list {
				border-bottom: 1rpx solid #F1F1F1;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #202020;
				line-height: 101rpx;
				text-align: center;
				font-style: normal;
				height: 102rpx;
				box-sizing: border-box;
			}
			.sheet_box_list:last-of-type {
				border-bottom: none;
			}
		}
		.sheet_box_list_more {
			position: absolute;
			top: 408rpx;
			left: 0;
			width: 750rpx;
			height: 100rpx;
			background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		}
		.sheet_box_btn {
			width: 100%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #AAAAAA;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			line-height: 105rpx;
		}
	}
</style>